<template>
  <div class="charts" ref="chartRef"></div>
</template>

<script>
import echarts from 'echarts';
let myChart = null;

const color = [
  new echarts.graphic.LinearGradient(
    0, 0, 0, 1,
    [
      { offset: 0, color: '#E58B44' },
      { offset: 1, color: 'transparent' }
    ]
  ),
  new echarts.graphic.LinearGradient(
    0, 0, 0, 1,
    [
      { offset: 0, color: '#D95CFF' },
      { offset: 1, color: 'transparent' }
    ]
  ),
  new echarts.graphic.LinearGradient(
    0, 0, 0, 1,
    [
      { offset: 0, color: '#06A3F4' },
      { offset: 1, color: 'transparent' }
    ]
  ),
  new echarts.graphic.LinearGradient(
    0, 0, 0, 1,
    [
      { offset: 0, color: '#29AF62' },
      { offset: 1, color: 'transparent' }
    ]
  ),
  new echarts.graphic.LinearGradient(
    0, 0, 0, 1,
    [
      { offset: 0, color: '#FF3939' },
      { offset: 1, color: 'transparent' }
    ]
  )
]
export default {
  name: 'DinglePieChart',
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  mounted() {
    myChart = echarts.init(this.$refs.chartRef);
  },
  watch: {
    list: {
      handler(newVal) {
        if (newVal.length) {
          const result = newVal.map((item, index) => {
            return {
              name: item.goodsName,
              value: item.goodsAmount,
              itemStyle: {
                color: color[index]
              }
            }
          })
          this.$nextTick(() => {
            myChart.setOption(this.getOptions(result));
          })
        }
      },
      immediate: true,
      deep: true,
    }
  },
  methods: {
    getOptions(data) {
      return {
        tooltip: {
          trigger: 'item',
          formatter: "{b} : {c} ({d}%)"
        },
        series: [
          {
            name: '标品售卖数量',
            type: 'pie',
            radius: '60%',
            center: ['50%', '50%'],
            roseType: 'radius',
            label: {
              normal: {
                formatter: ['{c|{c}}', '{b|{b}}'].join('\n'),
                rich: {
                  c: {
                    color: 'rgb(241,246,104)',
                    fontSize: 20,
                    fontWeight: 'bold',
                    lineHeight: 5
                  },
                  b: {
                    color: 'rgb(98,137,169)',
                    fontSize: 15,
                    height: 40
                  },
                },
              }
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: 'rgb(98,137,169)',
                },
                smooth: 0.2,
                length: 10,
                length2: 20,

              }
            },
            itemStyle: {
              normal: {
                shadowColor: 'rgba(0, 0, 0, 0.8)',
                shadowBlur: 50,
              }
            },
            data
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.charts {
  width: 100%;
  height: 100%;
}
</style>